<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>管理界面</title>
	<style>
		*{
			margin: 0;
			padding: 0;
			list-style: none;
			text-decoration: none;
		}
		#container{
			width: 100%;
			height: 900px;
			background: #ccc;
		}
		#top{
			width: 100%;
			height: 75px;
		}
		#top > #top1{
			width: 100%;
			height: 35px;
			background: #393f77;
			border-bottom: 0.1px solid #666;
		}
		#top1 > #title{
			color: #c1d5ec;
			cursor: pointer;
			font-family: "Microsoft YaHei";
			margin-left: 12px;
			font-size: 18px;
			line-height: 36px;
		}
		#top1 > #title:hover{
			text-decoration: underline;
		}
		#top1 > #welcome{
			color: #c1d5ec;
			position: absolute;
			right: 50px;
			padding: 15px 20px 0 0;
			font-family: tahoma,arial,"SimSun","Helvetica Neue",Helvetica,sans-serif;
			font-size: 15px;
			line-height: 18px;
		}
		#top1 > #quit{
			color: #c1d5ec;
			padding: 15px 16px 0 0;
			text-decoration: none;
			font-family: tahoma,arial,"SimSun","Helvetica Neue",Helvetica,sans-serif;
			font-size: 13px;
			line-height: 18px;
			float: right;
			cursor: pointer;
		}
		#top1 > #quit:hover{
			color: #f60;
			text-decoration: underline;
		}
		#top > #top2{
			width: 100%;
			height: 40px;
			background: #3b4e88;
		}
		#top2 > #nav{
			width: 330px;
			height: 35px;
			overflow: hidden;
			position: absolute;
			left: 12px;
			top: 40px;
			display: flex;
			border-radius: 7px 7px 0 0;
		}
		#nav > li{
			width: 110px;
			height: 35px;
			cursor: pointer;
			line-height: 35px;
			text-align: center;
		}
		#nav > li:hover{
			background: #e8e9ee;
		}
		#nav > li > a{
			color: #e8e9ee;
		}
		#nav > li > a:hover{
			color: #3b4e88;
		}
		coder{
			display: none;
		}
		#container2{
			width: 1024px;
			height: 820px;
		}
		#container2 > #left{
			width: 15%;
			height: 100%;	
			background: #e8e9ee;
		}
		#left > ul{
			padding-top: 10px;
		}
		#left > ul > li{
			width: 100%;
			height: 30px;
			margin-top: 5px;
			text-align: center;
			line-height: 30px;	
		}
		#left > ul > li > a{
			color: #5c637b;
		}
		#left > ul > li > a:hover{
			color: #f60;
			text-decoration: underline;
		}
		#container2 > #right{
			
		}
	</style>
</head>
<body>
	<div id="container">
		<div id="top">
			<div id="top1">
				<span id="title">酷睿影评·后台管理</span>
				<span id="welcome">Welcome,Bruce</span>
				<a href="###" title="退出系统" id="quit">[退出]</a>
			</div>
			<div id="top2">
				<ul id="nav">
					<li><a href="javascript:setMiddle('comment')">评论管理</a></li>
					<li><a href="javascript:setMiddle('movie')">影片管理</a></li>
					<li><a href="javascript:setMiddle('user')">用户管理</a></li>
				</ul>
			</div>
		</div>
		<div id="middle">
			
		</div>
	</div>

	<coder id="comment">
		<form action="" id="comment_form">
			<div id="container2">
				<div id="left">
					<ul>
						<li><a href="javascript:setRight('select_comments')">查看评论</a></li>
						<li><a href="javascript:setRight('delet_comments')">删除评论</a></li>
					</ul>
				</div>
				<div id="right">
					
				</div>
			</div>
		</form>
	</coder>

	<coder id="movie">
		<form action="" id="movie_form">
			<div id="container2">
				<div id="left">
					<ul>
						<li><a href="javascript:setRight('add_movie')">添加影片</a></li>
						<li><a href="javascript:setRight('modify_movie')">修改影片</a></li>
						<li><a href="javascript:setRight('delet_movie')">删除影片</a></li>
					</ul>
				</div>
				<div id="right">
					
				</div>
			</div>
		</form>
	</coder>
	
	<coder id="user">
		<form action="" id="user_form">
			<div id="container2">
				<div id="left">
					<ul>
						<li><a href="javascript:setRight('select_user')">查看用户</a></li>
						<li><a href="javascript:setRight('modify_user')">封禁用户</a></li>
					</ul>
				</div>
				<div id="right">
					
				</div>
			</div>
		</form>
	</coder>

	<coder id="select_comments">
		<form action="" id="user_form">

		</form>
	</coder>
	<coder id="delet_comments">
		<form action="" id="user_form">
			
		</form>
	</coder>

	

	<script>
		function setMiddle(id) {
			var source = document.getElementById(id);
			var target = document.getElementById('middle');
			target.innerHTML = source.innerHTML;
		}
		function setRight(id){
			var source = document.getElementById(id);
			var target = document.getElementById('right');
			target.innerHTML = source.innerHTML;
		}



		window.onload=function(w){
			setRight('select_comments');//窗体加载后默认进入评论管理
		}
	</script>
</body>
</html>